<template>
    <div class="etf-container">
        <div class="total" @click="onTest">{{ $t('message.etf.ts') }}</div>
        <div class="c-title">
            <div class="tt t1">
                #
                <jSort class="jst" :sort="cusSort.name" :call-fun="onSort"></jSort>
            </div>
            <div class="tt t2">{{ $t('message.etf.t1') }}</div>
            <!-- <div class="tt t3">{{ $t('message.etf.t2') }}</div>
            <div class="tt t4">{{ $t('message.etf.t3') }}</div> -->
            <div class="tt t5">{{ $t('message.etf.t4') }}</div>
            <div class="tt t6">
                {{ $t('message.etf.t5') }}
                <jSort class="jst" :sort="cusSort.cap" :call-fun="onSort"></jSort>
            </div>
            <div class="tt t7">{{ $t('message.etf.t6') }}</div>
            <div class="tt t8">{{ $t('message.etf.t7') }}</div>
            <div class="tt t9">
                {{ $t('message.etf.t8') }} 
                <jSort class="jst" :sort="cusSort.time" :call-fun="onSort"></jSort>
            </div>
        </div>
        <div class="c-list" v-for="(item, i) in filterArr" @click="onDetail(item)">
            <div class="tt t1">{{ i + 1 }}</div>
            <div class="tt t2">{{ item.entityName }}<span class="cyx">{{ $t('message.etf.sp') }}</span></div>
            <!-- <div class="tt t3">-</div>
            <div class="tt t4">-</div> -->
            <div class="tt t5">
                <span class="bts">BTC</span>
                <JNumber  :num="Number(item.totalBalance)" notbold></JNumber>
            </div>
            <div class="tt t6">
                <JNumber :num="Number(item.totalBalance) * btc" prefix="$"></JNumber>
            </div>
            <div class="tt t7">
                <div class="rleft">
                    <span class="bts">BTC</span>
                    <!-- <JNumber class="th-last" :num="item.transaction.value" notbold> </JNumber> -->
                    <JNumber class="th-last"
                        :num="`${item?.transaction?.direction == 'out' ? '+' : '-'}${item?.transaction?.value}`" notbold
                        :isColor="true"> </JNumber>
                </div>
                <div class="rright">
                    <!-- <JNumber class="th-last"
                        :num="`${item?.transaction?.direction == 'out' ? '' : '-'}${item?.transaction?.value}`" notbold
                        :isColor="true"> </JNumber> -->
                    <span v-if="item.totalBalance == 0" :class="item?.transaction?.direction == 'out'?'add':'min'">-%</span>
                    <span v-else :class="item?.transaction?.direction == 'out'?'add':'min'">({{ item?.transaction?.direction == 'out' ? '+' : '-' }}{{((item?.transaction?.value / item.totalBalance)*100).toFixed(2)}}%)</span>
                </div>

            </div>
            <div class="tt t8">
                <div class="rleft">
                    <!-- 最后金额 -->
                    <JNumber class="th-last" :num="`${item?.transaction?.direction == 'out' ? '+' : '-'}${item.transaction.value * btc}`" notbold prefix="$"  :isColor="true"> </JNumber>
                </div>
                <div class="rright">
                    <!-- 与上次对比 最后金额变化  -->
                    <!-- <JNumber class="th-last"
                        :num="`${item?.transaction?.direction == 'out' ? '+' : '-'}${item?.transaction?.value * btc}`"
                        notbold :isColor="true" prefix="$" suffix=""> </JNumber> -->
                    <span v-if="item.totalBalance == 0" :class="item?.transaction?.direction == 'out'?'add':'min'">-%</span>
                        <span v-else :class="item?.transaction?.direction == 'out'?'add':'min'">({{ item?.transaction?.direction == 'out' ? '+' : '-' }}{{(((item.transaction.value * btc )/(item.totalBalance*btc))*100).toFixed(2)}}%)</span>

                </div>

            </div>
            <div class="tt t9">{{ getTime(item.latestTime) }}</div>
        </div>
        <Empty v-if="list.length == 0"></Empty>
        <div class="c-loading" v-show="loading">
            <jLoading></jLoading>
        </div>
        <!-- <JLock></JLock> -->
    </div>
</template>

<script setup lang="ts">
import { URL_ETF_LIST } from "@/comm/api";
import { formatTimeAgo, formatTimestamp } from "@/comm/format";
import { get } from "@/comm/request";
import { useKline } from "@/stores/kline";
import { ref, reactive, toRefs, onMounted, computed } from "vue"
import { useRouter } from "vue-router";
import JNumber from "@/components/j-number/index.vue"
import jLoading from "@/components/j-loding/index.vue"
import Empty from "@/components/j-empty/index.vue"
import { SortEnum } from "@/comm/sort";
import jSort from "@/components/j-sort/index.vue";
import { sortList } from "@/comm/tooler";
import JLock from "@/components/j-lock/index.vue";
// import { modal } from "@/comm/Wallet1";
const router = useRouter();
const list = ref<any[]>([])
const kline = useKline();
const loading = ref(true)

function onTest(){
    // modal.open();
}
const cusSort = reactive({
    cap: {
        key: "cap",
        val: SortEnum.NONE
    },
    name: {
        key: "name",
        val: SortEnum.NONE
    },
    time: {
        key: "time",
        val:  SortEnum.DOWN
    }
})

function onSort(v: any) {
    const temp = { ...v };
    if (temp.val == SortEnum.NONE) {
        temp.val = SortEnum.UP
    }
    else if (temp.val == SortEnum.UP) {
        temp.val = SortEnum.DOWN
    }
    else if (temp.val == SortEnum.DOWN) {
        temp.val = SortEnum.NONE
    }

    if (v.key == "cap") {
        cusSort.cap = temp;
        cusSort.name.val = SortEnum.NONE;
        cusSort.time.val = SortEnum.NONE;
    }
    else if(v.key == "name"){
        cusSort.name = temp;
        cusSort.cap.val = SortEnum.NONE;
        cusSort.time.val = SortEnum.NONE;
    }
    else{
        cusSort.time = temp;
        cusSort.name.val = SortEnum.NONE;
        cusSort.cap.val = SortEnum.NONE;
    }
}

const btc = computed(() => {
    let item = kline.map.find(i => i.symbol == "BTCUSDT");
    if (item) {
        return item.lastPrice
    }
    return 0;
})


onMounted(async () => {
    await kline.init()
    console.log(kline.map,"wwwww")
    if (btc.value) {
        loadPage();
    }
    else {
        console.log("no BTC price")
    }

})
async function loadPage() {
    try {
        let res: any = await get(URL_ETF_LIST);
        // console.log("#########", res, kline)
        list.value = res.data;
        console.log('获取ETF数据',res)
    }
    catch (e) {
        console.log(e)
    }

    loading.value = false;
}

const filterArr = computed(() => {
    let arr = [...list.value];

    if (cusSort.cap.val != SortEnum.NONE) {
        let temp = cusSort.cap;
        if (temp.val == SortEnum.UP) {
            sortList(arr, "totalBalance", false)
        }
        else if (temp.val == SortEnum.DOWN) {
            sortList(arr, "totalBalance", true)
        }
        return arr;
    }
    if (cusSort.name.val != SortEnum.NONE) {
        let temp = cusSort.name;
        if (temp.val == SortEnum.UP) {
            sortList(arr, "entityName", false)
        }
        else if (temp.val == SortEnum.DOWN) {
            sortList(arr, "entityName", true)
        }
        return arr;
    }

    if (cusSort.time.val != SortEnum.NONE) {
        let temp = cusSort.time;
        if (temp.val == SortEnum.UP) {
            sortList(arr, "latestTime", false)
        }
        else if (temp.val == SortEnum.DOWN) {
            sortList(arr, "latestTime", true)
        }
        return arr;
    }
    // console.log('列表数据!!!',arr)
    return arr;
})

function getTime(t: number) {
    return formatTimeAgo(t * 1000);
    // return formatTimestamp(t * 1000)
}

function onDetail(item: any) {
    router.push("/etfsDetail/" + item.entityId);
}
</script>

<style lang="less" scoped>
@import url("./index.less");
</style>
